<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ site_title }} - 用户登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!--<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1e40af', // 企业主色调
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <!-- 品牌标志 -->
                <div class="flex items-center space-x-3">
                    <div class="bg-primary text-white p-2 rounded-lg">
                        <i class="fa fa-building text-xl"></i>
                    </div>
                    <h1 class="text-xl font-bold text-primary hidden md:block">{{ site_title }}</h1>
                </div>
                
                <!-- 注册链接 -->
                <div>
                    <a href="/register_page" class="text-primary hover:text-primary/80 font-medium">
                        没有账号？立即注册
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="flex-1 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-lg p-8 w-full max-w-md">
            <div class="text-center mb-8">
                <h2 class="text-2xl font-bold text-gray-900">用户登录</h2>
                <p class="text-gray-600 mt-2">欢迎回来，请输入您的账号信息</p>
            </div>
            
            <!-- 登录表单 -->
            <form id="login-form" class="space-y-4">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-user text-gray-400"></i>
                        </div>
                        <input type="text" id="username" name="username" 
                            class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" 
                            placeholder="请输入用户名" required>
                    </div>
                </div>
                
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="password" name="password" 
                            class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" 
                            placeholder="请输入密码" required>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember-me" name="remember-me" type="checkbox"
                            class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="remember-me" class="ml-2 block text-sm text-gray-700">
                            记住我
                        </label>
                    </div>
                    
                    <div>
                        <a href="#" class="text-sm text-primary hover:text-primary/80 font-medium">
                            忘记密码？
                        </a>
                    </div>
                </div>
                
                <button type="submit" 
                    class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition duration-200">
                    登录
                </button>
            </form>
            
            <!-- 错误提示区域 -->
            <div id="error-message" class="mt-4 text-red-500 text-sm hidden"></div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-4 border-t border-gray-200">
        <div class="container mx-auto px-4 text-center text-gray-600 text-sm">
            <p>© 2024 {{ site_title }}. 保留所有权利.</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginForm = document.getElementById('login-form');
            const errorMessage = document.getElementById('error-message');
            
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 重置消息
                errorMessage.classList.add('hidden');
                
                // 获取表单数据
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                // 发送登录请求
                fetch('/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                })
                .then(response => {
                    // 先检查响应状态，再解析JSON
                    return response.json().then(data => ({
                        status: response.ok,
                        data: data
                    }));
                })
                .then(({ status, data }) => {
                    if (status && data.access_token && data.refresh_token) {
                        // 登录成功，同时保存access_token和refresh_token
                        localStorage.setItem('access_token', data.access_token);
                        localStorage.setItem('refresh_token', data.refresh_token);
                        
                        // 跳转到首页
                        window.location.href = '/';
                    } else {
                        // 登录失败
                        errorMessage.textContent = data.error || '登录失败，请检查用户名和密码';
                        errorMessage.classList.remove('hidden');
                    }
                })
                .catch(error => {
                    console.error('登录请求错误:', error);
                    errorMessage.textContent = '网络错误，请稍后再试';
                    errorMessage.classList.remove('hidden');
                });
            });
        });
    </script>
</body>
</html>
